import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,
    Select, message, DatePicker, Popconfirm,
    Form, Upload
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import { routerRedux } from 'dva/router';
import querystring from 'querystring';
// import styles from './ProductAdd.less';

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item;
const { Option } = Select;
const { Description } = DescriptionList;

const { Step } = Steps;
const TextArea = Input.TextArea;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const monthFormat = 'YYYY-MM-DD HH:mm:ss';
/*
  产品详情修改
*/
const EditableCell = ({ editable, value, onChange }) => (
    <div>
        {editable
            ? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
            : value
        }
    </div>
);

@connect(({ product }) => ({
    product,
    // loading: loading.models.rule,
}))
@Form.create()
export default class ProductDetails extends PureComponent {
    state = {
        modalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        productType: '', //分期 贷款
        productTime: false,
        startTime: '',
        endTime: '',
        endTimeString: '',
        selectTimeType: false,
        selectTime: false,
        timeValid: 0,
        id: '',
        validTime: null,
        checked: true,
        productDetailsList: {},
        retailData: [],
        channelData: [],
        // isForever: false,
        initRetailCount: 0,
        initChannelCount: 0,
        endOpen: false,
        isEndTime: false
    };

    componentDidMount() {
        const { dispatch, location, push } = this.props;
        const params = querystring.parse(location.search.slice(1));
        this.setState({
            id: params.id,
        });
        dispatch({
            type: 'product/queryProductDetails',
            payload: {
                id: params.id,
            },
            callback: () => {
                const { product: { productDetails, channelList, retailsList } } = this.props;
                // console.log("productDetails",productDetails)
                productDetails &&
                    this.setState({
                        productDetailsList: productDetails,
                        productType: productDetails.productType,
                        validTime: productDetails.timeValid,
                        startTime: moment(productDetails.beginTime),
                        isEndTime: productDetails.timeValid == 0 ? false : true,
                        endTime: productDetails.timeValid == 1 ? null : moment(productDetails.endTime),
                        endTimeString: productDetails.timeValid == 1 ? null : moment(productDetails.endTime),
                    })
                if (productDetails.productType == 1) {
                    this.setState({
                        retailData: retailsList,
                        channelData: channelList,
                    })
                }
                // console.log("startTime",this.state.startTime)
                // console.log("endTime",this.state.endTime)
            },
        });
    }

    onRetailData = () => {
        if (this.state.initRetailCount == 0) {
            for (let i = 1; i < 4; i++) {
                this.state.retailData.push({
                    key: i,
                    id: i,
                    nper: `${(4 * i) * 3}`,
                    price: `0`,
                    type: 0,
                    isPreset: i <= 3,
                });
            }
            this.state.initRetailCount = 1
        }
    }
    onChannelData = () => {
        if (this.state.initChannelCount == 0) {
            for (let i = 1; i < 4; i++) {
                this.state.channelData.push({
                    key: i,
                    id: i,
                    nper: `${(4 * i) * 3}`,
                    price: `0`,
                    type: 1,
                    isPreset: i <= 3,
                });
            }
            this.state.initChannelCount = 1
        }
    }

    onChangeSelect = (value) => {
        if (this.state.productType == 0) {
            if (this.state.retailData == "") {
                this.onRetailData()
            }
            if (this.state.channelData == "") {
                this.onChannelData()
            }
        }
        this.setState({
            productType: value,
        });
    }

    constructor(props) {
        super(props);
        this.renderDelete = (record) => {
            return (
                <span>
                    <a onClick={() => this.editRetail(record.id)}>修改</a>
                    {!(record.nper == 12 || record.nper == 24 || record.nper == 36) &&
                        <Popconfirm title="确定要删除吗?" onConfirm={() => this.deleteRetail(record.id)}>
                            <a style={{ marginLeft: 10 }}>删除</a>
                        </Popconfirm>}
                </span>
            );
        }
        this.columnsRetail = [{
            title: '期数',
            dataIndex: 'nper',
            key: 'nper',
            width: '33%',
            render: (text, record) => this.renderColumnsRetail(text, record, 'nper'),
        }, {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
            width: '33%',
            render: (text, record) => this.renderColumnsRetail(text, record, 'price'),
        }, {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) => {
                const { editable } = record;
                return (
                    <div className="editable-row-operations">
                        {
                            editable ?
                                <span>
                                    <a onClick={() => this.saveRetail(record.id)}>保存</a>
                                    <Popconfirm title="确定要取消吗?" onConfirm={() => this.cancelRetail(record.id)}>
                                        <a style={{ marginLeft: 10 }}>取消</a>
                                    </Popconfirm>
                                </span>
                                :
                                this.renderDelete(record)
                        }
                    </div>
                );
            },
        }];
        this.renderChannelDelete = (record) => {
            return (
                <span>
                    <a onClick={() => this.editChannel(record.id)}>修改</a>
                    {!(record.nper == 12 || record.nper == 24 || record.nper == 36) &&
                        <Popconfirm title="确定要删除吗?" onConfirm={() => this.deleteChannel(record.id)}>
                            <a style={{ marginLeft: 10 }}>删除</a>
                        </Popconfirm>}
                </span>
            );
        }
        this.columnsChannel = [{
            title: '期数',
            dataIndex: 'nper',
            key: 'nper',
            width: '33%',
            render: (text, record) => this.renderColumnsChannel(text, record, 'nper'),
        }, {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
            width: '33%',
            render: (text, record) => this.renderColumnsChannel(text, record, 'price'),
        }, {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) => {
                const { editable } = record;
                // console.log("ecord.keyJAJSHJAHJ")
                // console.log(record)
                return (
                    <div className="editable-row-operations">
                        {
                            editable ?
                                <span>
                                    <a onClick={() => this.saveChannel(record.id)}>保存</a>
                                    <Popconfirm title="确定要取消吗?" onConfirm={() => this.cancelChannel(record.id)}>
                                        <a style={{ marginLeft: 10 }}>取消</a>
                                    </Popconfirm>
                                </span>
                                :
                                this.renderChannelDelete(record)
                        }
                    </div>
                );
            },
        }];
        this.cacheDataChannel = this.state.channelData.map(item => ({ ...item }));
        this.cacheDataRetail = this.state.retailData.map(item => ({ ...item }));
    }

    editRetail(key) {
        const newData = [...this.state.retailData];
        const target = newData.filter(item => key === item.id)[0];
        if (target) {
            target.editable = true;
            this.setState({ retailData: newData });
        }
    }
    saveRetail(key) {
        const newData = [...this.state.retailData];
        const target = newData.filter(item => key === item.id)[0];
        // console.log("targetsaveRetail")
        // console.log(target)
        if (target) {
            if (target.nper !== "" && target.price !== "") {
                delete target.editable;
                this.setState({ retailData: newData });
                this.cacheDataRetail = newData.map(item => ({ ...item }));
            } else {
                message.error("请先填写期数和价格")
            }
        }
    }
    cancelRetail(key) {
        const newData = [...this.state.retailData];
        const target = newData.filter(item => key === item.id)[0];
        // console.log("targetcancelRetail")
        // console.log(target)
        if (target) {
            Object.assign(target, this.cacheDataRetail.filter(item => key === item.id)[0]);
            delete target.editable;
            this.setState({ retailData: newData });
        }
    }
    deleteRetail(key) {
        const newData = [...this.state.retailData];
        this.setState({ retailData: newData.filter(item => item.id !== key) });
    }
    editChannel(key) {
        const newData = [...this.state.channelData];
        const target = newData.filter(item => key === item.id)[0];
        if (target) {
            target.editable = true;
            this.setState({ channelData: newData });
        }
    }
    saveChannel(key) {
        const newData = [...this.state.channelData];
        const target = newData.filter(item => key === item.id)[0];
        if (target) {
            delete target.editable;
            this.setState({ channelData: newData });
            this.cacheDataChannel = newData.map(item => ({ ...item }));
        }
    }
    cancelChannel(key) {
        const newData = [...this.state.channelData];
        const target = newData.filter(item => key === item.id)[0];
        if (target) {
            Object.assign(target, this.cacheDataChannel.filter(item => key === item.id)[0]);
            delete target.editable;
            this.setState({ channelData: newData });
        }
    }
    deleteChannel(key) {
        const newData = [...this.state.channelData];
        this.setState({ channelData: newData.filter(item => item.id !== key) });
    }

    renderColumnsRetail(text, record, column) {
        return (
            (record.nper == 12 || record.nper == 24 || record.nper == 36) && column == 'nper' ?
                text
                :
                <EditableCell
                    editable={record.editable}
                    value={text}
                    onChange={value => this.handleChangeRetail(value, record.id, column)}
                />
        );
    }
    renderColumnsChannel(text, record, column) {
        return (
            //判断期数为12，24，36的时候不能修改期数
            (record.nper == 12 || record.nper == 24 || record.nper == 36) && column == 'nper' ?
                text
                :
                <EditableCell
                    editable={record.editable}
                    value={text}
                    onChange={value => this.handleChangeChannel(value, record.id, column)}
                />
        );
    }
    handleChangeRetail(value, key, column) {
        if (value != 12 && value != 24 && value != 36) {
            const newData = [...this.state.retailData];
            const target = newData.filter(item => key === item.id)[0];
            if (target) {
                target[column] = value;
                this.setState({ retailData: newData });
            }
        } else {
            message.warning(`${value}期已存在`)
        }
    }
    handleChangeChannel(value, key, column) {
        if (value != 12 && value != 24 && value != 36) {
            const newData = [...this.state.channelData];
            const target = newData.filter(item => key === item.id)[0];
            if (target) {
                target[column] = value;
                this.setState({ channelData: newData });
            }
        } else {
            message.warning(`${value}期已存在`)
        }

    }
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    }

    newMemberRetailData = () => {
        const newRetailList = [...this.state.retailData];
        const newRecord = {
            key: newRetailList.length + 1,
            id: newRetailList.length + 1,
            nper: '',
            price: '',
            type: 0,
            editable: true,
            isNew: true,
            isPreset: false,
        };
        newRetailList.push(newRecord);
        this.setState({
            retailData: newRetailList
        });
    }

    newMemberChannelData = () => {
        const newChannelData = [...this.state.channelData];
        const newRecord = {
            key: newChannelData.length + 1,
            id: newChannelData.length + 1,
            nper: '',
            price: '',
            type: 1,
            editable: true,
            isNew: true,
            isPreset: false,
        };

        newChannelData.push(newRecord);
        this.setState({ channelData: newChannelData });
    }

    handleChangeForeverTime = (e) => {

        if (this.state.endTime) {
            this.setState({
                validTime: e.target.checked,
                isEndTime: !this.state.isEndTime,
                endTime: this.state.endTimeString
            });
        } else {
            this.setState({
                validTime: e.target.checked,
                isEndTime: !this.state.isEndTime,
                endTime: ''
            });
        }
        // this.state.validTime == 1 ? this.setState({ isForever: false }) : this.setState({ isForever: true })
    }

    handleRangeChange = (dates, dateStrings) => {
        this.setState({
            startTime: dates[0],
            endTime: dates[1],
        });
    }

    disabledStartDate = (startTime) => {
        const endTime = this.state.endTime;
        if (!startTime || !endTime) {
            return false;
        }
        return startTime.valueOf() > endTime.valueOf();
    }

    disabledEndDate = (endTime) => {
        const startTime = this.state.startTime;
        if (!endTime || !startTime) {
            return false;
        }
        return endTime.valueOf() <= startTime.valueOf();
    }

    onStartChange = (value) => {
        this.setState({
            startTime: value,
        });
    }

    onEndChange = (value) => {
        this.setState({
            endTime: value,
            selectTimeType: !this.state.selectTimeType
        })
    }

    handleStartOpenChange = (open) => {
        if (this.state.validTime != 1) {
            if (!open) {
                this.setState({ endOpen: true });
            }
        }
    }

    handleEndOpenChange = (open) => {
        if (this.state.validTime != 1) {
            this.setState({ endOpen: open });
        }
    }

    handleSubmit = () => {
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                if (this.state.validTime) {
                    this.setState({
                        startTime: null,
                        endTime: null
                    })
                    values.productType == 0 ?
                        this.props.dispatch({
                            type: 'product/changeProductDetails',
                            payload: {
                                id: this.state.id,
                                productName: values.productName,
                                productSize: values.productSize,
                                productType: values.productType,
                                timeValid: this.state.validTime ? 1 : 0,
                                beginTime: this.state.startTime,
                                endTime: this.state.endTime,
                                assetType: values.assetType,
                                productNum: values.productNum,
                                productDesc: values.productDesc,
                                retailPrice: values.retailPrice,
                                channelPrice: values.channelPrice,
                            },
                            callback: (code) => {
                                if (code == 200) {
                                    this.props.dispatch(routerRedux.push('/product/product-catalog'));
                                }
                            },
                        })
                        :
                        this.props.dispatch({
                            type: 'product/changeProductDetails',
                            payload: {
                                id: this.state.id,
                                productName: values.productName,
                                productSize: values.productSize,
                                productType: values.productType,
                                timeValid: this.state.validTime ? 1 : 0,
                                beginTime: this.state.startTime,
                                endTime: this.state.endTime,
                                assetType: values.assetType,
                                productNum: values.productNum,
                                productDesc: values.productDesc,
                                channelList: this.state.channelData,
                                retailList: this.state.retailData,
                            },

                            callback: (code) => {
                                if (code == 200) {
                                    this.props.dispatch(routerRedux.push('/product/product-catalog'));
                                }
                            },
                        })
                } else {
                    if (this.state.startTime == undefined && this.state.endTime == undefined) {
                        message.warning("请选择生效时间")
                    } else {
                        values.productType == 0 ?
                            this.props.dispatch({
                                type: 'product/changeProductDetails',
                                payload: {
                                    id: this.state.id,
                                    productName: values.productName,
                                    productSize: values.productSize,
                                    productType: values.productType,
                                    timeValid: this.state.validTime ? 1 : 0,
                                    beginTime: this.state.startTime,
                                    endTime: this.state.endTime,
                                    productNum: values.productNum,
                                    assetType: values.assetType,
                                    productDesc: values.productDesc,
                                    retailPrice: values.retailPrice,
                                    channelPrice: values.channelPrice,
                                },
                                callback: (code) => {
                                    if (code == 200) {
                                        this.props.dispatch(routerRedux.push('/product/product-catalog'));
                                    }
                                },
                            })
                            :
                            this.props.dispatch({
                                type: 'product/changeProductDetails',
                                payload: {
                                    id: this.state.id,
                                    productName: values.productName,
                                    productSize: values.productSize,
                                    productType: values.productType,
                                    timeValid: this.state.validTime ? 1 : 0,
                                    beginTime: this.state.startTime,
                                    endTime: this.state.endTime,
                                    assetType: values.assetType,
                                    productNum: values.productNum,
                                    productDesc: values.productDesc,
                                    channelList: this.state.channelData,
                                    retailList: this.state.retailData,
                                },

                                callback: (code) => {
                                    if (code == 200) {
                                        this.props.dispatch(routerRedux.push('/product/product-catalog'));
                                    }
                                },

                            })
                    }
                }
            }
        });
    };

    render() {
        const { product } = this.props;
        const { product: { productDetails, channelList, retailsList, loading } } = this.props;
        const { selectedRows, modalVisible } = this.state;
        const { getFieldDecorator, validateFieldsAndScroll } = this.props.form;


        const now = new Date();
        const oneDay = 1000 * 60 * 60 * 24;

        return (
            <PageHeaderLayout
                title="产品详情"
            >
                {/* 产品信息{JSON.stringify(productDetails)}渠道 */}
            {/* {JSON.stringify(this.state.channelList)}零售
            {JSON.stringify(this.state.retailsList)}qqq */}

                <Row>
                    <Card
                        title="产品信息"
                        bordered={false}
                        style={{ marginBottom: 24 }}
                    >
                        <Form layout="vertical" hideRequiredMark>
                            <Row >
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    产品名称：
                            </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item label=''>
                                        {getFieldDecorator('productName', {
                                            initialValue: productDetails.productName,
                                            rules: [{ required: true, message: '请输入产品名称' }],
                                        })(
                                            <Input placeholder="请输入产品名称" style={{ width: '100%' }} />
                                        )}
                                    </Form.Item>

                                </Col>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    产品编号：
                            </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('productNum', {
                                            initialValue: productDetails.productNum,
                                            rules: [{ required: true, message: '请输入产品编号' }],
                                        })(
                                            <Input placeholder="请输入产品编号" style={{ width: '100%' }} />
                                        )}
                                    </Form.Item>

                                </Col>
                            </Row>
                            <Row style={{ marginTop: 30 }}>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    产品规模(额度)：
                                </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('productSize', {
                                            initialValue: productDetails.productSize,
                                            rules: [{ required: true, message: '请输入产品规模' }],
                                        })(
                                            <InputNumber placeholder="请输入产品规模" style={{ width: '100%' }} />
                                        )}
                                    </Form.Item>
                                </Col>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    产品类型：
                                </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('productType', {
                                            initialValue: this.state.productType,
                                            rules: [{ required: true, message: '请选择产品类型' }],
                                        })(
                                            <Select
                                                placeholder="请选择产品类型"
                                                // defaultValue={this.state.productType}
                                                // value={this.state.productType}
                                                style={{ width: '100%' }}
                                                onChange={this.onChangeSelect}>
                                                <Option value={0}>贷款</Option>
                                                <Option value={1}>分期</Option>
                                            </Select>
                                        )}
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row style={{ marginTop: 50 }}>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    资产种类：
                                </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('assetType', {
                                            initialValue: productDetails.assetType,
                                            rules: [{ required: true, message: '请输入选择资产种类' }],
                                        })(
                                            <Select
                                                placeholder="请选择资产种类"
                                                style={{ width: '100%' }}>
                                                <Option value={1}>新车</Option>
                                                <Option value={2}>二手车</Option>
                                            </Select>
                                        )}
                                    </Form.Item>
                                </Col>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    生效时间：
                                </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('beginTime', {
                                        })(
                                            <span>
                                                <div>
                                                    <DatePicker
                                                        disabledDate={this.disabledStartDate}
                                                        showTime
                                                        format={monthFormat}
                                                        placeholder="开始时间"
                                                        style={{ width: '45%' }}
                                                        value={this.state.startTime}
                                                        onChange={this.onStartChange}
                                                        onOpenChange={this.handleStartOpenChange}
                                                    />
                                                    <DatePicker
                                                        disabledDate={this.disabledEndDate}
                                                        showTime
                                                        style={{ marginLeft: 5 }}
                                                        disabled={this.state.isEndTime}
                                                        format={monthFormat}
                                                        placeholder="结束时间"
                                                        value={this.state.isEndTime ? null : this.state.endTime}
                                                        style={{ width: '45%', marginLeft: '10px' }}
                                                        onChange={this.onEndChange}
                                                        open={this.state.endOpen}
                                                        onOpenChange={this.handleEndOpenChange}
                                                    />
                                                </div>
                                                <Checkbox
                                                    checked={this.state.validTime == 1 ? true : false}
                                                    style={{ marginTop: 10 }}
                                                    disabled={this.state.selectTimeType}
                                                    onChange={this.handleChangeForeverTime}
                                                >
                                                    永久
                                            </Checkbox>
                                            </span>
                                        )}
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row style={{ marginTop: 50 }}>
                                <Col span={3} style={{ textAlign: 'right' }}>
                                    产品描述：
                                </Col>
                                <Col span={8} style={{ float: 'left' }}>
                                    <Form.Item >
                                        {getFieldDecorator('productDesc', {
                                            initialValue: productDetails.productDesc == '' ? '' : productDetails.productDesc,
                                            rules: [{ required: true, message: '请输入产品描述' }],
                                        })(
                                            <TextArea rows={4} placeholder="请输入产品描述" style={{ width: '100%' }} />
                                        )}
                                    </Form.Item>

                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    {/* aaa{this.state.productType}bbb */}
                    {
                        this.state.productType == 0 ?

                            <Card
                                title="产品价格"
                                bordered={false}
                                style={{ marginBottom: 24 }}
                            >
                                <Form layout="vertical" hideRequiredMark>
                                    <Row >
                                        <Col span={3} style={{ textAlign: 'right' }}>
                                            零售价格：
                                        </Col>
                                        <Col span={8} style={{ float: 'left' }}>
                                            <Form.Item >
                                                {getFieldDecorator('retailPrice', {
                                                    initialValue: productDetails.retailPrice,
                                                })(
                                                    <Input placeholder="请输入零售价格" style={{ width: '100%' }} />
                                                )}
                                            </Form.Item>

                                        </Col>
                                        <Col span={3} style={{ textAlign: 'right' }}>
                                            渠道价格：
                                        </Col>
                                        <Col span={8} style={{ float: 'left' }}>
                                            <Form.Item >
                                                {getFieldDecorator('channelPrice', {
                                                    initialValue: productDetails.channelPrice,
                                                })(
                                                    <Input placeholder="请输入渠道价格" style={{ width: '100%' }} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Form>
                            </Card>
                            :
                            null
                    }
                    {
                        this.state.productType == 1 ?
                            <div>
                                <Card
                                    title="零售价格"
                                    bordered={false}
                                    style={{ marginBottom: 24 }}
                                >
                                    <Button
                                        style={{ width: '10%', marginTop: 16, marginBottom: 16 }}
                                        type="primary"
                                        onClick={this.newMemberRetailData}
                                        icon="plus">
                                        新增
                                    </Button>

                                    <Table
                                        bordered
                                        rowKey='id'
                                        dataSource={this.state.retailData}
                                        columns={this.columnsRetail} />
                                </Card>
                                <Card
                                    title="渠道价格"
                                    bordered={false}
                                    style={{ marginBottom: 24 }}
                                >
                                    <Button
                                        style={{ width: '10%', marginTop: 16, marginBottom: 16 }}
                                        type="primary"
                                        onClick={this.newMemberChannelData}
                                        icon="plus">
                                        新增
                                    </Button>
                                    <Table
                                        bordered
                                        rowKey='id'
                                        dataSource={this.state.channelData}
                                        columns={this.columnsChannel} />
                                </Card>
                            </div>
                            :
                            null
                    }
                    <p style={{ marginTop: 50 }}>
                        <Button type="primary" onClick={this.handleSubmit} loading={product.confirmLoading}>提交</Button>{/*loading={submitting}*/}
                    </p>
                </Row>
            </PageHeaderLayout>
        );
    }
}
